<template>
  <div class="repository-container">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <div class="header-left">
          <div class="header-icon">
            <i class="el-icon-collection"></i>
          </div>
          <div class="header-text">
            <span class="title">知识库管理</span>
            <span class="subtitle">管理和维护您的知识库资源</span>
          </div>
        </div>
        <div class="header-right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddDialog"
            class="add-btn"
          >
            新增知识库
          </el-button>
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="search-wrapper">
          <el-input
            v-model="searchQuery"
            placeholder="搜索知识库名称或描述..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
            @clear="handleSearch"
            @input="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"
              >搜索</el-button
            >
          </el-input>
        </div>
      </div>

      <el-table
        :data="filteredTagList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        highlight-current-row
        class="knowledge-table"
      >
        <el-table-column prop="name" label="知识库名称" min-width="200">
          <template slot-scope="scope">
            <div class="knowledge-name">
              <div class="knowledge-icon">
                <i class="el-icon-folder-opened"></i>
              </div>
              <div class="knowledge-info">
                <span class="knowledge-title">{{ scope.row.name }}</span>
                <span class="knowledge-count"
                  >{{ scope.row.documentCount || 0 }} 个文档</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            <div class="time-info">
              <i class="el-icon-time"></i>
              <span>{{ scope.row.createTime || "未知" }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-document"
                @click="viewContent(scope.row)"
                class="view-btn"
              >
                查看内容
              </el-button>
              <el-button
                v-if="isAdmin"
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="confirmDelete(scope.row)"
                class="delete-btn"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增知识库对话框 -->
    <el-dialog
      title="新增知识库"
      :visible.sync="uploadDialogVisible"
      width="700px"
      :close-on-click-modal="true"
      :append-to-body="true"
      class="upload-dialog"
    >
      <el-form
        :model="uploadForm"
        label-width="100px"
        :rules="uploadRules"
        ref="uploadForm"
      >
        <el-form-item label="知识库名称" prop="ragTag">
          <el-input
            v-model="uploadForm.ragTag"
            placeholder="请输入知识库名称"
            class="form-input"
          >
            <i slot="prefix" class="el-icon-folder-add"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="上传文件" prop="files">
          <el-upload
            class="upload-demo"
            drag
            multiple
            action="/api/v1/rag/file/upload"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            :file-list="fileList"
            accept=".csv,.txt,.md,.xlsx,.xls,.xlsm,.doc,.docx"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              支持 CSV、TXT、MD、Excel(.xls/.xlsx/.xlsm)、Word(.doc/.docx)
              等格式文件，单个文件不超过10MB
            </div>
          </el-upload>

          <!-- 自定义文件列表显示 -->
          <div v-if="fileList.length > 0" class="custom-file-list">
            <div class="file-list-header">
              <span>已选择的文件 ({{ fileList.length }})</span>
            </div>
            <div class="file-list-content">
              <div
                v-for="(file, index) in fileList"
                :key="index"
                class="file-item"
              >
                <div class="file-icon">
                  <i :class="getFileTypeIcon(file.name)"></i>
                </div>
                <div class="file-info">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-size">
                    {{ (file.size / 1024 / 1024).toFixed(2) }} MB
                  </div>
                </div>
                <div class="file-actions">
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="handleFileRemove(file, fileList)"
                    circle
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false" class="cancel-btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="submitUpload"
          class="confirm-btn"
          :loading="uploadLoading"
          :disabled="uploadLoading"
        >
          {{ uploadLoading ? "上传中..." : "确 定" }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 查看内容对话框 -->
    <el-dialog
      title="知识库内容"
      :visible.sync="contentDialogVisible"
      width="900px"
      :close-on-click-modal="true"
      :append-to-body="true"
      class="content-dialog"
    >
      <div v-loading="contentLoading" class="content-container">
        <div
          v-if="currentContent && currentContent.length > 0"
          class="content-list"
        >
          <div class="content-summary">
            <div class="summary-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="summary-info">
              <span class="summary-title">{{ currentKnowledgeName }}</span>
              <span class="summary-count"
                >共 {{ currentContent.length }} 个文档</span
              >
            </div>
          </div>
          <div
            v-for="(doc, index) in currentContent"
            :key="index"
            class="content-item"
          >
            <div class="content-header">
              <div class="content-header-left">
                <div class="content-icon">
                  <i class="el-icon-document-copy"></i>
                </div>
                <div class="content-info">
                  <span class="content-title">文档 {{ index + 1 }}</span>
                  <span class="content-id">ID: {{ doc.id || "未知" }}</span>
                </div>
              </div>
              <div class="content-actions">
                <el-button
                  v-if="isAdmin"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="confirmDeleteDocument(doc, index)"
                  class="delete-doc-btn"
                >
                  删除
                </el-button>
              </div>
            </div>
            <div class="content-body">
              <div
                class="content-text"
                v-html="formatContent(doc.content)"
              ></div>
            </div>
          </div>
        </div>
        <el-empty
          v-else
          description="暂无内容"
          class="empty-content"
        ></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteRagTag, deleteDocument } from "@/api/rag";

export default {
  name: "Repository",
  data() {
    return {
      tagList: [],
      filteredTagList: [],
      searchQuery: "",
      loading: false,
      contentLoading: false,
      uploadDialogVisible: false,
      contentDialogVisible: false,
      currentContent: [],
      currentKnowledgeName: "",
      fileList: [],
      isAdmin: false, // 是否为管理员
      uploadLoading: false, // 上传加载状态
      uploadForm: {
        ragTag: "",
        // description: "",
      },
      uploadRules: {
        ragTag: [
          { required: true, message: "请输入知识库名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        // description: [
        //   { max: 200, message: "描述不能超过200个字符", trigger: "blur" },
        // ],
      },
    };
  },
  created() {
    this.checkUserRole();
    this.getTagList();
  },
  methods: {
    // 检查用户角色
    checkUserRole() {
      const roles = this.$store.getters.roles;
      this.isAdmin = roles && roles.includes("admin");
    },

    // 获取知识库标签列表
    async getTagList() {
      this.loading = true;
      try {
        const res = await this.$http.get("/api/v1/rag/query_rag_tag_list");
        if (res.code === "0000") {
          this.tagList = res.data.map((name) => ({
            name,
            description: "",
            createTime: new Date().toLocaleString(),
            documentCount: 0,
          }));
          this.filteredTagList = [...this.tagList];

          // 获取每个知识库的文档数量
          for (let tag of this.tagList) {
            try {
              const contentRes = await this.$http.get(
                "/api/v1/rag/query_rag_content",
                {
                  params: { ragTag: tag.name },
                }
              );
              if (contentRes.code === "0000" && contentRes.data) {
                tag.documentCount = contentRes.data.length;
              }
            } catch (error) {
              this.$message.error("获取文档数量失败");
            }
          }
        }
      } catch (error) {
        this.$message.error("获取标签列表失败");
      } finally {
        this.loading = false;
      }
    },

    // 搜索处理
    handleSearch() {
      if (!this.searchQuery) {
        this.filteredTagList = [...this.tagList];
        return;
      }
      this.filteredTagList = this.tagList.filter((item) =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },

    // 显示新增知识库对话框
    showAddDialog() {
      this.uploadDialogVisible = true;
      this.uploadForm = {
        ragTag: "",
        // description: "",
      };
      this.fileList = [];
    },

    // 获取文件扩展名
    getFileExtension(filename) {
      return filename.toLowerCase().substring(filename.lastIndexOf("."));
    },

    // 获取文件类型图标
    getFileTypeIcon(filename) {
      const extension = this.getFileExtension(filename);
      const iconMap = {
        ".txt": "el-icon-document",
        ".md": "el-icon-document-copy",
        ".csv": "el-icon-s-grid",
        ".doc": "el-icon-document-copy",
        ".docx": "el-icon-document-copy",
        ".xls": "el-icon-s-grid",
        ".xlsx": "el-icon-s-grid",
        ".xlsm": "el-icon-s-grid",
      };
      return iconMap[extension] || "el-icon-document";
    },

    // 检查文件类型是否支持
    isFileTypeSupported(file) {
      // 支持的文件类型映射
      const supportedTypes = {
        // 文本文件
        ".txt": ["text/plain"],
        ".md": ["text/markdown", "text/plain"],
        ".csv": ["text/csv", "application/csv"],

        // Word文档
        ".doc": ["application/msword"],
        ".docx": [
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          "application/vnd.ms-word.document.12",
        ],

        // Excel文档
        ".xls": ["application/vnd.ms-excel"],
        ".xlsx": [
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          "application/vnd.ms-excel.sheet.12",
        ],
        ".xlsm": [
          "application/vnd.ms-excel.sheet.macroEnabled.12",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        ],
      };

      const fileExtension = this.getFileExtension(file.name);
      const allowedMimeTypes = supportedTypes[fileExtension] || [];

      // 检查MIME类型是否匹配
      if (allowedMimeTypes.includes(file.type)) {
        return true;
      }

      // 如果MIME类型不匹配，但扩展名支持，也允许上传
      // 因为某些系统可能返回错误的MIME类型
      if (supportedTypes[fileExtension]) {
        return true;
      }

      return false;
    },

    // 上传前检查
    beforeUpload(file) {
      // 检查文件类型
      if (!this.isFileTypeSupported(file)) {
        this.$message.error(
          "不支持的文件格式！支持的文件类型：TXT、MD、CSV、Excel(.xls/.xlsx/.xlsm)、Word(.doc/.docx)"
        );
        return false;
      }

      // 检查文件大小 (10MB)
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }

      return true;
    },

    // 文件改变时的钩子
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 移除文件时的钩子
    handleFileRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 上传错误时的钩子
    handleUploadError(err, file, fileList) {
      this.$message.error("文件上传失败：" + (err.message || "未知错误"));
    },
    // 提交上传
    submitUpload() {
      this.$refs.uploadForm.validate(async (valid) => {
        if (valid) {
          if (this.fileList.length === 0) {
            this.$message.warning("请至少上传一个文件");
            return;
          }

          this.uploadLoading = true;

          try {
            const formData = new FormData();
            formData.append("ragTag", this.uploadForm.ragTag);
            // if (this.uploadForm.description) {
            //   formData.append("description", this.uploadForm.description);
            // }

            this.fileList.forEach((file) => {
              formData.append("file", file.raw);
            });

            const res = await this.$http.post(
              "/api/v1/rag/file/upload",
              formData,
              {
                headers: {
                  "Content-Type": "multipart/form-data",
                },
              }
            );

            if (res.code === "0000") {
              this.$message.success("知识库创建成功！");
              this.uploadDialogVisible = false;
              this.getTagList();
              // 清空表单
              this.uploadForm = {
                ragTag: "",
                // description: "",
              };
              this.fileList = [];
            } else {
              this.$message.error(res.info || "上传失败");
            }
          } catch (error) {
            this.$message.error("上传失败：" + (error.message || "未知错误"));
          } finally {
            this.uploadLoading = false;
          }
        }
      });
    },

    // 确认删除
    confirmDelete(row) {
      this.$confirm("此操作将永久删除该知识库及其所有文档, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteTag(row);
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 删除标签
    async deleteTag(row) {
      try {
        // 使用API函数，它会自动添加正确的请求头
        const res = await deleteRagTag(row.name);
        if (res.code === "0000") {
          this.$message.success("删除成功");
          this.getTagList();
        } else if (res.code === "403") {
          this.$message.error("权限不足：只有管理员才能删除知识库");
        } else {
          this.$message.error(res.info || "删除失败");
        }
      } catch (error) {
        if (error.response && error.response.status === 403) {
          this.$message.error("权限不足：只有管理员才能删除知识库");
        } else {
          this.$message.error("删除失败：" + (error.message || "未知错误"));
        }
      }
    },

    // 确认删除文档
    confirmDeleteDocument(doc, index) {
      this.$confirm("此操作将永久删除该文档, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteDocument(doc, index);
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 删除单个文档
    async deleteDocument(doc, index) {
      try {
        // 使用API函数，它会自动添加正确的请求头
        const res = await deleteDocument(doc.id);

        if (res.code === "0000") {
          // 从前端列表中移除
          this.currentContent.splice(index, 1);
          this.$message.success("文档删除成功");

          // 更新知识库列表中的文档数量
          const tagIndex = this.tagList.findIndex(
            (tag) => tag.name === this.currentKnowledgeName
          );
          if (tagIndex !== -1) {
            this.tagList[tagIndex].documentCount = Math.max(
              0,
              this.tagList[tagIndex].documentCount - 1
            );
          }
        } else if (res.code === "403") {
          this.$message.error("权限不足：只有管理员才能删除文档");
        } else {
          this.$message.error(res.info || "删除失败");
        }
      } catch (error) {
        if (error.response && error.response.status === 403) {
          this.$message.error("权限不足：只有管理员才能删除文档");
        } else {
          this.$message.error("删除文档失败: " + (error.message || "未知错误"));
        }
      }
    },

    // 格式化内容显示
    formatContent(content) {
      if (!content) return "";
      // 将换行符转换为HTML换行，并处理特殊字符
      return content
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/\n/g, "<br>")
        .replace(/\s{2,}/g, (match) => "&nbsp;".repeat(match.length));
    },

    // 查看内容
    async viewContent(row) {
      this.contentDialogVisible = true;
      this.currentContent = [];
      this.currentKnowledgeName = row.name;

      // 使用 nextTick 确保弹窗完全显示后再设置 loading
      await this.$nextTick();
      this.contentLoading = true;

      try {
        const res = await this.$http.get("/api/v1/rag/query_rag_content", {
          params: { ragTag: row.name },
        });

        if (res.code === "0000" && res.data) {
          this.currentContent = res.data;
        } else {
          this.$message.warning("未获取到文档内容");
        }
      } catch (error) {
        this.$message.error("获取内容失败: " + (error.message || "未知错误"));
      } finally {
        this.contentLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.repository-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 84px);
}

.box-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.95);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);
}

.header-icon i {
  font-size: 24px;
  color: white;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.2;
}

.subtitle {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 400;
}

.header-right {
  display: flex;
  gap: 12px;
}

.add-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.search-area {
  margin-bottom: 30px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
}

.search-wrapper {
  width: 100%;
  max-width: 600px;
  position: relative;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__inner) {
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
  padding-left: 50px;
  background-color: #fff;
  font-size: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-input :deep(.el-input__inner:focus) {
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.search-input :deep(.el-input-group__append) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  padding: 0 24px;
  border-radius: 0 25px 25px 0;
  box-shadow: 0 2px 12px rgba(79, 172, 254, 0.3);
}

.search-input :deep(.el-input-group__append .el-button) {
  color: white;
  border: none;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}

.search-input :deep(.el-input__prefix) {
  left: 18px;
}

.knowledge-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.knowledge-name {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.knowledge-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

.knowledge-icon i {
  font-size: 18px;
  color: white;
}

.knowledge-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.knowledge-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.knowledge-count {
  font-size: 12px;
  color: #7f8c8d;
  background: #f8f9fa;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.knowledge-description {
  color: #606266;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7f8c8d;
  font-size: 14px;
}

.time-info i {
  color: #4facfe;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.delete-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.upload-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.upload-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 24px;
}

.upload-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.form-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
}

.form-input :deep(.el-input__inner:focus) {
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.form-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
}

.form-textarea :deep(.el-textarea__inner:focus) {
  border-color: #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.upload-demo {
  width: 100%;
}

.upload-demo :deep(.el-upload-dragger) {
  border-radius: 12px;
  border: 2px dashed #4facfe;
  background: linear-gradient(
    135deg,
    rgba(79, 172, 254, 0.05) 0%,
    rgba(0, 242, 254, 0.05) 100%
  );
  transition: all 0.3s ease;
}

.upload-demo :deep(.el-upload-dragger:hover) {
  border-color: #00f2fe;
  background: linear-gradient(
    135deg,
    rgba(79, 172, 254, 0.1) 0%,
    rgba(0, 242, 254, 0.1) 100%
  );
}

.el-upload__tip {
  color: #7f8c8d;
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
}

.dialog-footer {
  padding: 20px 24px;
  border-top: 1px solid #e1e8ed;
  background-color: #f8f9fa;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
}

.confirm-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.content-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.content-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 24px;
}

.content-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.content-dialog :deep(.el-dialog__body) {
  padding: 0;
  max-height: 70vh;
  overflow: hidden;
}

.content-container {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.content-summary {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);
}

.summary-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-icon i {
  font-size: 24px;
  color: white;
}

.summary-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-title {
  font-size: 18px;
  font-weight: 600;
}

.summary-count {
  font-size: 14px;
  opacity: 0.9;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-item {
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.content-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.content-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 16px 20px;
  border-bottom: 1px solid #e1e8ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-icon i {
  font-size: 16px;
  color: white;
}

.content-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.content-title {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.content-id {
  font-size: 12px;
  color: #7f8c8d;
}

.content-actions {
  display: flex;
  gap: 8px;
}

.delete-doc-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.delete-doc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.content-body {
  padding: 20px;
}

.content-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.8;
  color: #606266;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #4facfe;
}

.empty-content {
  padding: 60px 20px;
}

:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e1e8ed;
}

:deep(.el-table td) {
  padding: 16px 0;
  border-bottom: 1px solid #f1f3f4;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafbfc;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f0f8ff !important;
}

:deep(.el-loading-mask) {
  border-radius: 12px;
}

/* 自定义文件列表样式 */
.custom-file-list {
  margin-top: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f9fa;
}

.file-list-header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
}

.file-list-content {
  max-height: 300px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e1e8ed;
  background-color: white;
  transition: all 0.3s ease;
}

.file-item:last-child {
  border-bottom: none;
}

.file-item:hover {
  background-color: #f0f8ff;
}

.file-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.file-icon i {
  font-size: 16px;
  color: white;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #7f8c8d;
}

.file-actions {
  margin-left: 12px;
}

.file-actions .el-button {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  transition: all 0.3s ease;
}

.file-actions .el-button:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}
</style>